{% extends "base-left.html" %}
{% load staticfiles %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}">
{% endblock %}

{% block content %}

    <!-- Main content -->
    <section class="content">
        <div id="devlist">
            <div class="box box-primary" id="liebiao">
                <div class="box-header">
                    <div class="btn-group pull-left">
                        <button type="button" id="btnRefresh" class="btn btn-default">
                            <i class="glyphicon glyphicon-repeat"></i>刷新
                        </button>
                    </div>

                    <div class="btn-group pull-left">&nbsp;</div>
                    <div class="btn-group pull-left">
                        <button type="button" id="btnCreate" class="btn btn-primary">
                            <i class="glyphicon glyphicon-plus"></i>新增
                        </button>
                    </div>

                    <div class="btn-group pull-left">&nbsp;</div>
                    <div class="btn-group pull-left">
                        <button type="button" id="btnDelete" class="btn btn-danger">
                            <i class="glyphicon glyphicon-trash"></i>删除
                        </button>
                    </div>

                </div>

                <div class="box-body">
                    <table id="dtbList" class="display" cellspacing="0" width="100%">
                        <thead>
                            <tr valign="middle">
                                <th><input type="checkbox" id="checkAll"> </th>
                                <th>ID</th>
                                <th>名称</th>
                                <th>代码</th>
                                <th>URL</th>
                                <th>图标</th>
                                <th>父菜单</th>
                                <th>编号</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                    <br><br>
                </div>
            </div>
        </div>

    </section>

    <!-- /.content -->

{% endblock %}


{% block javascripts %}
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.const.js' %}"></script>
    <script src="{% static 'js/plugins/layer/layer.js' %}"></script>

    <script type="text/javascript">
        $(function () {
            $("#SYSTEM-RBAC").addClass('active');
            $("#SYSTEM-RBAC-MENU").addClass('active');
        });
    </script>


    <script type="text/javascript">
        var oDataTable=null;
        var data=[
            {% for menu in menu_all %}
                {
                  'id':"{{ menu.id }}",
                  'name':"{{ menu.name }}",
                  'code':"{{ menu.code }}",
                  'url':"{{ menu.url|default_if_none:'' }}",
                  'icon':"{{ menu.icon|default_if_none:'' }}",
                  'number':{{ menu.number }},
                  'parent':"{{ menu.parent.name|default_if_none:'' }}"
                },
            {% endfor %}
        ];
        $(function () {
            oDataTable=initTable();
            function initTable() {
                var oTable=$('#dtbList').DataTable($.extend(true,{},
                DATATABLES_CONSTANT.DATA_TABLES.DEFAULT_OPTION,
                    {
                        data:data,
                        columns:[
                            DATATABLES_CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,
                            {
                                data:'id',
                                width:'5%',
                            },
                            {
                                data:'name',
                            },
                            {
                                data:'code',
                            },
                            {
                                data:'url',
                            },
                            {
                                data:'icon',
                            },
                            {
                                data:'parent',
                            },
                            {
                                data:'number'
                            },
                            {
                                data:'id',
                                bSortable:'false',
                                render:function (data,type,row,meta) {
                                    var ret="";
                                    var ret="<button title='详情-编辑' onclick='doUpdate("
                                        + data + ")'><i class='glyphicon glyphicon-pencil'></i></button>";
                                    return ret;
                                }
                            }
                        ],
                    }));
                return oTable;
            }
        });

         $("#btnRefresh").click(function () {
             window.location.reload();
        });

        $("#btnCreate").click(function () {
            var div=layer.open({
                type:2,
                title:'新增',
                shadeClose:false,
                maxmin:true,
                area:['800px','720px'],
                content:"{% url 'system:rbac-menu-create' %}",
                end:function () {
                    window.location.reload();
                }
            });
        });

        function doUpdate(id) {
            layer.open({
                type:2,
                title:'编辑',
                shadeClose:false,
                maxmin:true,
                area:['800px','720px'],
                content:["{% url 'system:rbac-menu-update' %}"+'?id='+id,'no'],
                end:function () {
                    window.location.reload();
                }
            });
        }
    </script>

    <script type="text/javascript">
        $("#checkAll").on('click',function () {
           if ($(this).prop("checked")===true ) {
               $("input[name='checkList']").prop("checked",$(this).prop("checked"));
               $('#example tbody tr').addClass("selected");
           } else {
               $("input[name='checkList']").prop("checked",false);
               $('#example tbody tr').removeClass("selected");
           }
        });

    </script>

{% endblock %}
